<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>4×4拼图小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            touch-action: manipulation;
        }
        
        .container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 500px;
            padding: 25px;
            margin-top: 20px;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 28px;
        }
        
        .timer-container {
            background-color: #2c3e50;
            color: white;
            border-radius: 50px;
            padding: 10px 20px;
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        
        .puzzle-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 2px;
            margin: 20px auto;
            width: 320px;
            height: 320px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .puzzle-piece {
            width: 100%;
            height: 100%;
            background-size: 320px 320px;
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
        }
        
        .puzzle-piece.selected {
            transform: scale(0.95);
            box-shadow: 0 0 0 3px #27ae60;
            z-index: 10;
        }
        
        .controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }
        
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        #start-btn {
            background-color: #27ae60;
            color: white;
        }
        
        #start-btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        
        #start-btn:not(:disabled):hover {
            background-color: #2ecc71;
        }
        
        .game-status {
            text-align: center;
            margin-top: 15px;
            font-weight: bold;
            min-height: 24px;
            color: #e74c3c;
        }
        
        .instructions {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .instructions h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 5px;
        }
        
        .swap-hint {
            text-align: center;
            margin-top: 10px;
            color: #7f8c8d;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>4×4拼图小游戏</h1>
        
        <div class="timer-container">
            剩余时间: <span id="timer">30</span> 秒
        </div>
        
        <div class="puzzle-container" id="puzzle-container">
            <!-- 拼图块将通过JavaScript动态生成 -->
        </div>
        
        <div class="swap-hint">点击选择第一个拼图，再点击第二个拼图进行交换</div>
        
        <div class="game-status" id="game-status"></div>
        
        <div class="controls">
            <button id="start-btn" class="btn">开始游戏</button>
        </div>
        
        <div class="instructions">
            <h3>游戏说明</h3>
            <ul>
                <li>点击"开始游戏"按钮开始拼图，计时30秒</li>
                <li>点击选择第一个拼图，再点击第二个拼图进行交换</li>
                <li>在时间内完成4×4拼图即获胜</li>
            </ul>
        </div>
    </div>

    <script>
        // 游戏状态变量
        var gameStarted = false;
        var timer;
        var timeLeft = 30;
        var gridSize = 4;
        var totalPieces = gridSize * gridSize;
        var currentOrder = Array.from({length: totalPieces}, (_, i) => i);
        var selectedPiece = null;
        
        // 使用指定图片
        var puzzleImageUrl = 'https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAALh62iv-Glcn_PWP-rA-s4LplLhxpo5AALoGAAC1AOAVXHqPEDoLSQXNgQ.jpeg';
        
        // DOM元素
        var puzzleContainer = document.getElementById('puzzle-container');
        var timerElement = document.getElementById('timer');
        var startBtn = document.getElementById('start-btn');
        var gameStatus = document.getElementById('game-status');
        
        // 初始化游戏
        initGame(puzzleImageUrl);
        
        // 事件监听器
        startBtn.addEventListener('click', startGame);
        
        // 初始化游戏函数
        function initGame(imageSrc) {
            puzzleContainer.innerHTML = '';
            currentOrder = Array.from({length: totalPieces}, (_, i) => i);
            selectedPiece = null;
            
            // 创建4×4拼图
            for (var i = 0; i < totalPieces; i++) {
                var piece = document.createElement('div');
                piece.className = 'puzzle-piece';
                piece.setAttribute('data-index', i);
                
                piece.style.backgroundImage = 'url(' + imageSrc + ')';
                // 计算背景位置
                var row = Math.floor(i / gridSize);
                var col = i % gridSize;
                var pieceSize = 320 / gridSize;
                piece.style.backgroundPosition = '-' + (col * pieceSize) + 'px -' + (row * pieceSize) + 'px';
                
                // 添加点击事件
                piece.addEventListener('click', function() {
                    if (gameStarted) {
                        handlePieceClick(this);
                    }
                });
                
                puzzleContainer.appendChild(piece);
            }
            
            gameStatus.textContent = '';
            timeLeft = 30;
            timerElement.textContent = timeLeft;
            startBtn.textContent = '开始游戏';
            startBtn.disabled = false;
            gameStarted = false;
        }
        
        // 处理拼图块点击
        function handlePieceClick(piece) {
            // 如果没有选中的拼图，选中当前拼图
            if (!selectedPiece) {
                selectedPiece = piece;
                piece.classList.add('selected');
                return;
            }
            
            // 如果点击的是已选中的拼图，取消选择
            if (selectedPiece === piece) {
                selectedPiece.classList.remove('selected');
                selectedPiece = null;
                return;
            }
            
            // 交换两个拼图块
            var index1 = parseInt(selectedPiece.getAttribute('data-index'));
            var index2 = parseInt(piece.getAttribute('data-index'));
            
            swapPieces(index1, index2);
            
            // 取消选择状态
            selectedPiece.classList.remove('selected');
            selectedPiece = null;
            
            // 检查是否完成
            if (checkCompletion()) {
                clearInterval(timer);
                gameStarted = false;
                startBtn.disabled = false;
                startBtn.textContent = '重新开始';
                gameStatus.textContent = '恭喜！你完成了拼图！';
            }
        }
        
        // 开始游戏函数
        function startGame() {
            if (gameStarted) {
                // 重新开始游戏
                clearInterval(timer);
                initGame(puzzleImageUrl);
                return;
            }
            
            gameStarted = true;
            startBtn.disabled = true;
            startBtn.textContent = '游戏进行中...';
            gameStatus.textContent = '';
            
            // 打乱拼图
            shufflePuzzle();
            
            // 开始计时
            timeLeft = 30;
            timerElement.textContent = timeLeft;
            
            timer = setInterval(function() {
                timeLeft--;
                timerElement.textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    gameStarted = false;
                    startBtn.disabled = false;
                    startBtn.textContent = '重新开始';
                    gameStatus.textContent = '时间到！游戏结束';
                }
            }, 1000);
        }
        
        // 打乱拼图函数
        function shufflePuzzle() {
            // 随机交换200次来打乱拼图
            for (var i = 0; i < 200; i++) {
                // 随机选择两个不同的索引
                var index1 = Math.floor(Math.random() * totalPieces);
                var index2 = Math.floor(Math.random() * totalPieces);
                
                // 确保两个索引不同
                while (index2 === index1) {
                    index2 = Math.floor(Math.random() * totalPieces);
                }
                
                // 交换拼图块
                swapPieces(index1, index2);
            }
        }
        
        // 交换拼图块函数
        function swapPieces(index1, index2) {
            var pieces = document.querySelectorAll('.puzzle-piece');
            
            // 交换背景图片和位置
            var tempBg = pieces[index1].style.backgroundImage;
            var tempPos = pieces[index1].style.backgroundPosition;
            
            pieces[index1].style.backgroundImage = pieces[index2].style.backgroundImage;
            pieces[index1].style.backgroundPosition = pieces[index2].style.backgroundPosition;
            
            pieces[index2].style.backgroundImage = tempBg;
            pieces[index2].style.backgroundPosition = tempPos;
            
            // 更新当前顺序
            var temp = currentOrder[index1];
            currentOrder[index1] = currentOrder[index2];
            currentOrder[index2] = temp;
        }
        
        // 检查是否完成函数
        function checkCompletion() {
            for (var i = 0; i < currentOrder.length; i++) {
                if (currentOrder[i] !== i) {
                    return false;
                }
            }
            return true;
        }
    </script>
</body>
</html>